/** 
  注册统计
*/
<template>
    <div>
        <div>
            <div class="main">
             <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
                 <!-- 注册统计 -->
                <el-tab-pane :label="$t('regist.registStatistics')" name="first" ></el-tab-pane>
                <!-- 留学生注册统计 -->
                <el-tab-pane :label="$t('regist.overRegistStatistics')" name="second"></el-tab-pane>
            </el-tabs>
            </div>
            <el-card>
                <el-form :model="queryForm" ref="queryForm" :rules="rulesForm"   label-suffix=":" style="min-width:1000px">
                    <el-row :gutter="24" >
                        <el-col :span="4">
                            <el-form-item label-width="50px" label-position="left">
                            <span class="searchTitle">筛选条件</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <!-- 学年学期 -->
                            <el-form-item
                                label-width="90px"
                                label-position="right"
                                prop="calendarId"
                                :label="$t('regist.calendarId')"
                            >
                                <CalendarSelect
                                    v-model="queryForm.calendarId"
                                    :all="true"
                                ></CalendarSelect>
                            </el-form-item>
                        </el-col>

                        <el-col :span="7">
                            <!-- 是否新生 -->
                            <el-form-item :label="$t('regist.isStudent')" label-width="90px" label-position="right">
                                <el-select
                                    v-model.trim="queryForm.isNewStudent"
                                    clearable
                                    filterable
                                    style="width: 100%"
                                    placeholder
                                >
                                    <el-option
                                        v-for="item in options.ifNewStu"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label-width="50px">
                            <el-button @click="reset">重置</el-button>
                            <el-button @click="onSubmit">筛选</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>

            <!-- 搜索框结束 -->

            <!-- 列表页开始 -->
            <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
                <h1 class="condition-title">{{ queryForm.isOverseas === 0 ? $t('regist.registStatistics') : $t('regist.overRegistStatistics') }}</h1>
                <div class="sub-title">
                    <div class="float-right" style="display: flex">
                        <!-- 导出 -->
                        <el-button @click="exportAnalysis()">{{ $t('regist.export') }}</el-button>
                    </div>
                </div>
                <edu-table
                    :pagination="false"
                    :order="true"
                    :tooltipEffect="tooltipEffect"
                    stripe
                    :data="dataList"
                    :selection="false"
                    size="mini"
                >
                    <!-- 学院 -->
                    <edu-table-column
                        :label="$t('regist.facultyName')"
                        prop="facultyName"
                        align="left"
                    ></edu-table-column>
                    <!-- 总数 -->
                    <edu-table-column
                        :label="$t('regist.total')"
                        prop="total"
                        align="left"
                    ></edu-table-column>
                    <!-- 已报到 -->
                    <edu-table-column
                        :label="$t('regist.reported')"
                        prop="reported"
                        align="left"
                    ></edu-table-column>
                     <!-- 未报到 -->
                    <edu-table-column
                        :label="$t('regist.unreported')"
                        prop="unreported"
                        align="left"
                    ></edu-table-column>
                     <!-- 报到率 -->
                    <edu-table-column
                        :label="$t('regist.reportRate')"
                        prop="reportRate"
                        align="left"
                    ></edu-table-column>
                     <!-- 已注册 -->
                    <edu-table-column
                        :label="$t('regist.registered')"
                        prop="registered"
                        align="left"
                    ></edu-table-column>
                    <!-- 未注册 -->
                    <edu-table-column
                        :label="$t('regist.unregistered')"
                        prop="unregistered"
                        align="left"
                    ></edu-table-column>
                    <!-- 注册率 -->
                    <edu-table-column
                        :label="$t('regist.RegistrationRate')"
                        prop="registrationRate"
                        width="120"
                        align="left"
                    ></edu-table-column>
                </edu-table>
            </el-card>
        </div>
        <edu-export-dialog class="test" :title="$t('message.prompt')" ref="downloadRef" ></edu-export-dialog>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import { registdStatistics,exportList,exportExcelS,exportExcelT } from "common/src/api/studentRegister";
export default {
    data() {
        return {
            queryForm: {
                isNewStudent: '',
                calendarId: 110,
                isOverseas: 0
            },
            activeName: 'first',
            dataList: [],
            options: {
                ifNewStu: [
                    { value: 1, label: '是' },
                    { value: 0, label: '否' },
                ],
                calendarIdList: [],
            },
            rulesForm: {
                calendarId: [
                    {
                        required: true,
                        message: this.$t('regist.choiceCalendarId'),
                        trigger: 'change',
                    },
                ],
            },
        }
    },

    mounted() {
        // 初始化列表页
        this.getListData()
    },
    methods: {

        handleClick(tab, event) {
            if(tab.name === 'first') {
                this.queryForm.isOverseas = 0
                this.getListData()
            } else if(tab.name === 'second') {
                this.queryForm.isOverseas = 1
                this.getListData()
            }
        },
        // 导出目录
        exportAnalysis() {
            let _this = this
            let parm = {
                calendarId: this.queryForm.calendarId,
                isNewStudent: this.queryForm.isNewStudent,
                isOverseas: this.queryForm.isOverseas
            }
            if (this.dataList.length === 0) {
                this.$message.error('无数据')
            } else {
                this.$refs.downloadRef.open()
                exportList(parm).then((res) => {
                    if (res.data && res.data.key) {
                        this.exportNext(res.data.key)
                    }
                })
            }
        },
        exportNext(key) {
            setTimeout(() => {
                exportExcelS(key).then((resS) => {
                    if (resS.data && resS.data.path) {
                        exportExcelT(resS.data.path, this.queryForm.isOverseas).then((resT) => {
                            this.$message({
                                message: this.$t('base.exportSuccess'),
                                type: 'success',
                            })
                            this.$refs.downloadRef.close()
                        })
                    } else {
                        this.exportNext(key)
                    }
                })
            }, 3000)
        },

        // 重置筛选框
        reset() {
            this.queryForm.calendarId = 110,
            this.queryForm.isNewStudent = ''
            this.getListData()
        },

        // 查询按钮
        onSubmit() {
            this.getListData()
        },

        // 获取列表
        getListData() {
            let _this = this
            this.dataList = []
            _this.$refs['queryForm'].validate((valid) => {
                if (_this.queryForm.calendarId) {
                    registdStatistics(_this.queryForm).then((res) => {
                        res.data.forEach((revList) => {
                            _this.dataList.push(revList)
                        })
                    })
                } else {
                    this.$message.error('请选择学年学期')
                }
            })
        },
    },
}
</script>
<style lang="scss" scoped>
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.sub-title {
    margin: 16px 0 65px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
.searchTitle{
    font-size: 18px;
    font-weight: bold;
    margin: 0 !important;
}
.main ::v-deep {
    .tabs .el-tabs__item {
        font-size: 20px;
    }
}
.test ::v-deep .el-dialog {
    top: 45%!important;
}
</style>
